<template>
  <aside class='aside-area'>
    <div class='aside-author'>
      <div class='author-avatar'>
        <div class='avatar' :style='"--avatar-background: url("+websiteConfig.authorAvatar+") center / cover"'></div>
      </div>
      <header class='author-info'>
        <div class='name'>
          👋<em>我是{{ websiteConfig.author }}</em>{{ websiteConfig.name }}的作者
        </div>
        <div class='tool'>
          <div class='share' @click='shareUrl'>
            <i class='share-btn icon-share'></i>
          </div>
        </div>
      </header>
      <div class='text des'>
        {{ websiteConfig.authorIntro }}
      </div>
      <div class='text note'>
        <div class='arc-copy'>
          请您在需要时注明本文内容来源信息，若涉及转载第三方内容，请您一同注明。
        </div>
      </div>
      <div class='navigation aside-navigation fade-before fade-after'>
        <a :href='ArticlePath.Path+preArticleCard.id' rel='prev'>
          <span>{{ t(`settings.paginator.pre`) }} / {{ preArticleCard.articleTitle }}</span>
        </a>
        <a :href='ArticlePath.Path+nextArticleCard.id' rel='next'>
          <span>{{ t(`settings.paginator.next`) }} / {{ nextArticleCard.articleTitle }}</span>
        </a>
      </div>
    </div>
    <slot />
  </aside>
</template>

<script lang='ts'>
import { computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'
import { copyInfo } from '@/utils/validate'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'AuthorCard',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  props: ['preArticleCard', 'nextArticleCard'],
  setup() {
    const { t } = useI18n()
    const appStore = useAppStore()
    const shareUrl = () => {
      copyInfo(window.location.href)
    }
    return {
      t,
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
      shareUrl
    }
  }
})
</script>

<style scoped>
.aside-author {
    display: grid;
    place-content: center;
    grid: auto / 1fr 5rem 1fr;
    gap: 1em;
    min-height: 5rem;
}

.aside-author .author-avatar {
    grid-area: 2 / 2 / 3 / 3;
    place-self: center;
    z-index: 2;
}

.aside-author .avatar {
    --scale: 1;
    --shrink: calc((var(--img-size) / var(--scale) - var(--img-size)) / 2 - var(--border-size));
    --img-size: 8.25rem;
    --border-size: 5px;
    --border-color: rgb(var(--color-rgb) / .1);
    --bg-set: content-box no-repeat center / calc(100% / var(--scale));
    height: var(--img-size);
    width: var(--img-size);
    object-fit: contain;
    object-position: top;
    position: relative;
    margin: -0.55rem 0 0 0;
    border-radius: 0 0 50% 50%;
    background: radial-gradient(circle closest-side, rgb(var(--color-sub-rgb) / .5) calc(99% - var(--border-size)), var(--border-color) calc(100% - var(--border-size)), var(--border-color) 99%, #0000 100%) var(--bg-set);
    transform: scale(var(--scale));
    -webkit-mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--scale) - 2 * var(--border-size)) 50%, radial-gradient(circle closest-side, #000 99%, #0000 100%) var(--bg-set);
    transition: .5s;
}

.aside-author .avatar::after {
    display: flex;
    position: absolute;
    content: "";
    background: var(--avatar-background);
    border-radius: 50%;
    height: 80%;
    width: 80%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.aside-author .des, .arc-copy {
    color: hsl(var(--font-color)/var(--font-alpha));
}

@media (max-width: 1152px) {
    .aside-author {
        display: flex;
        flex-direction: column;
    }
}
</style>
